<template>
  <div class="gird_Content">
    <div class="sibian2">
      <span style="padding-left:0.12rem;">网格数量</span>
    </div>
    <div class="g_c_c">
      <div class="g_c_c_left">
        <div class="sibian1" style="background:#FFF">
          <span style="padding-left:0.12rem;color:#000001">网格数量</span>
          <span style="padding-left:0.12rem;color:#020226;font-size:0.22rem;">{{list2}}</span>
        </div>
        <div class="p_d_c_right1">
          <div class="charts flex_a" v-for="(item,index) in list1" :key="index">
            <div class="jiedao" @click="jiedao(item.code)">{{item.name}}</div>
            <div class="jiedao_num">{{item.value}}</div>
          </div>
        </div>
      </div>
      <div class="g_c_c_right">
        <div class="g_c_c_right_title flex">
          <div class="sibian" style="background:#FFF;width:58%">
            <span style="padding-left:0.12rem;color:#000001">网格数量</span>
            <span style="padding-left:0.12rem;color:#020226;font-size:0.22rem;">{{list2}}</span>
          </div>
          <div class="sibian" style="background:#FFF;width:40%;margin-left:0.1rem;">
            <span style="padding-left:0.12rem;color:#000001">网格数量</span>
            <span style="padding-left:0.12rem;color:#020226;font-size:0.22rem;">1214</span>
          </div>
        </div>
        <div class="flex_b internet">
          <div
            class="internet_text"
            :class="[activeIndex==index ? 'active':'']"
            v-for="(item,index) in inter"
            :key="index"
            @click="tab(index)"
          >
            <span>{{item}}</span>
          </div>
        </div>
        <div class="wg_list1 test-1">
          <div class="wg_list_text1 flex_c" v-for="(item,index) in list" :key="index">
            <span>{{item.name}}</span>
            <span>{{Number(item.value)}}</span>
            <span>{{item.num1}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { community, communityand } from "@/api/index.js";
export default {
  data() {
    return {
      activeIndex: "0",
      // community:[],
      // base:[],
      // proper:[]
      // list1: [],
      //   { type: "xx社区", num: 11, num1: 11 },
      // { type: "xx社区", num: 11, num1: 11 },
      //   { type: "xx社区", num: 11, num1: 11 },
      //  { type: "xx社区", num: 11, num1: 11 },
      //   { type: "xx社区", num: 11, num1: 11 },
      //    { type: "xx社区", num: 11, num1: 11 },
      //   { type: "xx社区", num: 11, num1: 11 },
      //   { type: "xx社区", num: 11, num1: 11 },
      //   { type: "xx社区", num: 11, num1: 11 },
      //   { type: "xx社区", num: 11, num1: 11 },
      //   { type: "xx社区", num: 11, num1: 11 },
      //   { type: "xx社区", num: 11, num1: 11 },
      //   { type: "xx社区", num: 11, num1: 11 },
      //   { type: "xx社区", num: 11, num1: 11 },
      //   { type: "xx社区", num: 11, num1: 11 },
      //   { type: "xx社区", num: 11, num1: 11 },
      //   { type: "xx社区", num: 11, num1: 11 },
      //   { type: "xx社区", num: 11, num1: 11 },
      //   { type: "xx社区", num: 11, num1: 11 },
      list2: "",
      inter: ["社区网络", "基础网络", "专有网络"],
      list: [
        // { name: "姚家", num: "262" },
        // { name: "燕山街道", num: "62" },
        // { name: "文东街道", num: "45" },
        // { name: "大明湖街道", num: "31" },
        // { name: "东关街道", num: "55" },
        // { name: "智远街道", num: "300" },
        // { name: "千佛山街道", num: "66" },
        // { name: "建新街道", num: "57" },
        // { name: "泉城路街道", num: "32" },
        // { name: "甸柳街道", num: "45" },
        // { name: "趵突泉街道", num: "45" },
        // { name: "解放路街道", num: "45" },
        // { name: "全区街道", num: "45" },
        // { name: "龙洞街道", num: "45" },
        // { name: "龙洞街道", num: "45" },
        // { name: "龙洞街道", num: "45" },
        // { name: "龙洞街道", num: "45" },
        // { name: "龙洞街道", num: "45" },
        // { name: "龙洞街道", num: "45" },
        // { name: "龙洞街道", num: "45" },
        // { name: "龙洞街道", num: "45" },
        // { name: "龙洞街道", num: "45" },
      ],
    };
  },
  created() {
    this.communitys();
    this.grid(370102001)
  },
  methods: {
    async grid(id){ try {
        const { data } = await communityand(id);
        console.log(data);
        this.list4 = data.date.baseGrid;
        this.list = data.date.properGrid;

      } catch (error) {
        console.log(error);
      }},
    async communitys() {
      try {
        const { data } = await community();
        console.log(data);
        this.list1 = data.date.streetData;
        this.list2 = data.date.gridCount;
      } catch (error) {
        console.log(error);
      }
    },
    async jiedao(id) {
      console.log(id);
      this.grid(id)
    },
    tab(index) {
      this.activeIndex = index;
    },
  },
};
</script>
<style lang="scss">
.gird_Content {
  width: 100%;
  height: 3rem;
  .sibian2{
    //  background: linear-gradient(to right, #3587DA 0%, #01135B 30%, #02135B 70%, #3485D7 100%);
  // opacity: 0.5;
  height: 0.29rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 0.25rem
  }
  .g_c_c {
    width: 100%;
    display: flex;
    .g_c_c_left {
      width: 45%;
      height: 3rem;
      border-right: 1px solid #1f3c98;
      .sibian1{
         background: linear-gradient(to right, #3587DA 0%, #01135B 30%, #02135B 70%, #3485D7 100%);
  opacity: 0.5;
  height: 0.29rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: .15rem;
  margin-right: .05rem;
  font-size: 0.2rem

      }
      .p_d_c_right1 {
        display: flex;
        display: -webkit-flex;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        .charts {
          width: 1.5rem;
          height: 0.5rem;
          border: 1px solid #2868af;
          margin: auto 0.03rem;
          margin-left: 0.03rem;
          margin-top: 0.03rem;
          background: #05225c;
          &:hover {
            background: linear-gradient(
              to right,
              #3587da 0%,
              #01135b 30%,
              #02135b 70%,
              #3485d7 100%
            );
          }
          .jiedao {
            width: 1.3rem;
          }
          div {
            color: #fff;
            font-size: 0.16rem;
            line-height: 0.3rem;
          }
        }
      }
    }
    .g_c_c_right {
      width: 52%;
      margin-left: 0.1rem;
      .internet {
        text-align: center;
        margin-top: 0.1rem;
        .internet_text {
          width: 1.35rem;

          height: 0.32rem;
          border: 1px solid #155cac;
          line-height: 0.32rem;
          span {
            color: #fff;
            font-size: 0.19rem;
          }
        }
      }
      .wg_list1 {
        overflow: auto;
        height: 3.2rem;
        .wg_list_text1 {
          height: 0.27rem;
          margin-top: 0.05rem;
          border-top: 1px solid #0708ba;
          border-bottom: 1px solid #0708ba;
          background: #030244;
          width: 98%;
          span {
            color: #fff;
            font-size: 0.18rem;
            width: 50%;
            text-align: center;
          }
        }
      }
      .wg_list1 > .wg_list_text1:nth-child(even) {
        background: linear-gradient(
          to right,
          #3587da 0%,
          #01135b 30%,
          #02135b 70%,
          #3485d7 100%
        );
        opacity: 0.5;
        span {
          color: #fff;
        }
      }
    }
  }
}
.active {
  background: linear-gradient(
    to right,
    #3587da 0%,
    #19488c 30%,
    #0e397e 70%,
    #0b2c71 100%
  );
  opacity: 0.5;
}
</style>

